<template>
  <Table
    ref="table"
    :size="size"
    :columns="finalColumn"
    :data="data"
    :stripe="true"
    :loading="loading"
    :height="typeof config.height === 'number' ? config.height : tableHeight"
    :max-height="tableHeight"
    :row-class-name="rowClassName"
    :highlight-row="true"
    :style="styleVar"
    class="table-wrapper"
    @on-row-click="(row, index) => $emit('handleClick', row, index)"
    @on-row-dblclick="(row, index) => $emit('handleDbClick', row, index)"
    @on-sort-change="
      (column, key, order) => $emit('handleSortChange', column, key, order)
    "
    @on-select="(selection, row) => $emit('handleSelect', selection, row)"
    @on-select-cancel="
      (selection, row) => $emit('handleSelectCancel', selection, row)
    "
    @on-select-all="(selection) => $emit('handleSelectAll', selection)"
    @on-select-all-cancel="(selection) => $emit('handleClearSelect', selection)"
  >
    <template
      v-if="config.additionalAction"
      slot-scope="{ row, index }"
      slot="additionalAction"
    >
      <!-- 非pda -->
      <div @click.stop.prevent v-if="!G_IsMobile">
        <template v-for="(item, i) in additionalAction.buttons">
          <a
            :style="{ color: item.color }"
            type="text"
            @click="item.event(data[index], index)"
            v-if="btnShowFun(row, item.key)"
            >{{ item.title }}</a
          >
          <Divider
            v-if="
              i < additionalAction.buttons.length - 1 &&
              btnShowFun(row, item.key)
            "
            type="vertical"
          />
        </template>
      </div>
      <!-- 兼容pda -->
      <Dropdown trigger="click" v-if="G_IsMobile" transfer>
        <a type="text">
          {{ lang.more }}
          <Icon type="ios-arrow-down"></Icon>
        </a>
        <template #list>
          <DropdownMenu
            v-for="(item, i) in additionalAction.buttons"
            :key="item.key"
          >
            <Button
              :style="{ color: item.color }"
              type="text"
              @click="item.event(data[index], index)"
              v-if="btnShowFun(row, item.key)"
              >{{ item.title }}</Button
            >
          </DropdownMenu>
        </template>
      </Dropdown>
    </template>
    <template v-if="config.action" slot-scope="{ row, index }" slot="action">
      <!-- 非pda -->
      <div @click.stop.prevent v-if="!G_IsMobile">
        <a type="text" @click="$emit('handleEdit', data[index], index)">{{
          lang.edit
        }}</a>
        <Divider type="vertical" />
        <a type="text" @click="$emit('handleDelete', data[index], index)">{{
          lang.delete
        }}</a>
        <Divider type="vertical" />
        <a type="text" @click="$emit('handleDetail', data[index], index)">{{
          lang.detail
        }}</a>
      </div>
      <!-- 兼容pda -->
      <Dropdown trigger="click" v-if="G_IsMobile" transfer>
        <a type="text">
          {{ lang.more }}
          <Icon type="ios-arrow-down"></Icon>
        </a>
        <template #list>
          <DropdownMenu>
            <DropdownItem>
              <a type="text" @click="$emit('handleEdit', data[index], index)">{{
                lang.edit
              }}</a>
            </DropdownItem>
            <DropdownItem>
              <a
                type="text"
                @click="$emit('handleDelete', data[index], index)"
                >{{ lang.delete }}</a
              >
            </DropdownItem>
            <DropdownItem>
              <a
                type="text"
                @click="$emit('handleDetail', data[index], index)"
                >{{ lang.detail }}</a
              >
            </DropdownItem>
          </DropdownMenu>
        </template>
      </Dropdown>
    </template>
  </Table>
</template>

<script>
export default {
  name: "table-basic",
  data() {
    return {
      finalColumn: [],
      tableHeight: window.innerHeight - 410,
    };
  },
  props: {
    config: {
      default: () => {
        return {
          height: null,
          action: true,
          additionalAction: true,
        };
      },
    },
    loading: {
      default: () => {
        return false;
      },
    },
    data: {
      default: () => {
        return [];
      },
    },
    size: {
      default: () => {
        return "default";
      },
    },
    columns: {
      default: () => {
        return [];
      },
    },
    additionalAction: {
      default: () => {
        return [];
      },
    },
    btnShowFun: {
      default: () => {
        return function () {
          return true;
        };
      },
    },
    rowbgc: {
      default: () => {
        return "red";
      },
    },
  },
  computed: {
    lang() {
      return {
        "en-US": {
          edit: "edit",
          delete: "delete",
          detail: "detail",
          action: "action",
          more: "more",
        },
        "zh-CN": {
          edit: "编辑",
          delete: "删除",
          detail: "查看",
          action: "操作",
          more: "更多",
        },
      }[this.G_Locale];
    },
    checkColumn() {
      return {
        type: "selection",
        width: 60,
        align: "center",
        field: "left",
        show: true,
      };
    },
    actionColumn() {
      let actionColumn = {
        key: "action",
        title: this.lang.action,
        slot: "action",
        width: 200,
        fixed: "right",
        align: "center",
        show: true,
      };
      this.G_IsMobile && (actionColumn.width = 90);
      return actionColumn;
    },
    styleVar() {
      return {
        "--bgc": this.rowbgc,
      };
    },
  },
  mounted() {
    this.finalColumn = this.getFinalColumn();
  },
  watch: {
    columns: {
      handler: function () {
        this.finalColumn = this.getFinalColumn();
      },
      deep: true,
    },
    "config.checkColumnDisabled": {
      handler: function () {
        this.finalColumn = this.getFinalColumn();
      }
    },
    "config.additionalAction": {
      handler: function () {
        this.finalColumn = this.getFinalColumn();
      },
      deep: true,
    },
    "config.action": {
      handler: function () {
        this.finalColumn = this.getFinalColumn();
      },
      deep: true,
    },
  },
  methods: {
    getFinalColumn() {
      let col = [
        ...(this.config.checkColumnDisabled ? [] : [this.checkColumn]),
        ...this.columns.filter((item) => item.show),
      ];
      if (this.config.additionalAction) {
        col.push(this.additionalAction);
      }
      if (this.config.action) {
        col.push(this.actionColumn);
      }
      return col;
    },
    download() {
      this.G_Download(
        this.$refs.table,
        "The original data",
        this.columns.filter((item) => item.show === true),
        this.data
      );
    },
    export() {
      this.G_Export(
        "The original data",
        this.columns.filter((item) => item.show === true),
        this.data
      );
    },
    /**
     * 解决列设置中显隐字段不好使
     */
    setFinalColumn() {
      this.finalColumn = this.getFinalColumn();
    },
    /**
     * 自定义背景样式
     */
    rowClassName(row, index) {
      if (row["needColor"]) {
        return "color-table-info-row";
      } else {
        return "";
      }
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep .ivu-table .color-table-info-row td {
  background-color: var(--bgc) !important;
  color: #fff;
  a {
    color: #fff;
  }
}
::v-deep .ivu-table .color-table-info-row.ivu-table-row-hover td {
  background-color: var(--bgc);
  color: #fff;
  a {
    color: #fff;
  }
}
.table-wrapper {
  height: 100%;
}
</style>
